<template>
    <div class="container process-list">
        <div class="card">
            <div class="card-header"><i class="icon icon-history"></i>流程配置筛选</div>
            <div class="card-body">
                <div class="query-criteria clearfix">
                    <el-form :inline="true" :model="Sort" class="demo-form-inline f-left">
                        <div class="el-form-item el-form-item--small">
                            <label class="el-form-item__label">查询关键词</label>
                        </div>
                        <el-form-item>
                            <el-input v-model.trim="Sort.key" placeholder="请输入key/名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onQuery">查询</el-button>
                        </el-form-item>
                    </el-form>
                  <div class="fn-btn f-right">
                      <el-button type="warning" icon="el-icon-plus" @click="createFlow">创建一个新的流程</el-button>
                  </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">流程配置列表</div>
            <div class="card-body">
                <el-table stripe :data="tableData" style="width: 100%">
                    <el-table-column prop="id" label="模型ID" width="120">
                    </el-table-column>
                    <el-table-column prop="key" label="流程Key">
                    </el-table-column>
                    <el-table-column prop="name" label="流程名称">
                    </el-table-column>
                    <el-table-column label="发布状态" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.deploymentId == null">未发布</span>
                            <span v-if="scope.row.deploymentId !== null" class="color-success">已发布</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" width="180">
                        <template slot-scope="scope">
                            <span>{{scope.row.createTime | timeF}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="detail(scope.row.id)" type="text" size="small">查看</el-button>
                            <el-button @click="update(scope.row.id)" type="text" size="small">修改</el-button>
                            <el-button @click="publish(scope.row.id)" type="text" size="small" v-if="scope.row.deploymentId == null">发布</el-button>
                            <el-button @click="cancel(scope.row.persistentState.deploymentId)" type="text" size="small" v-if="scope.row.deploymentId !== null">取消发布</el-button>
                            <el-button @click="delelt(scope.row.id)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                  <div class="page-wrap" ref="tablePage" v-if="pagesTotal>10">
                      <el-pagination background @current-change="currentChange" :current-page="currentPage" layout="total, prev, pager, next" :total="pagesTotal">
                      </el-pagination>
                  </div>
            </div>
        </div>
        <el-dialog
        title="填写流程的流程Key和名称"
        :visible.sync="dialogVisible"
        width="30%"
        append-to-body
        :before-close="handleClose">
        <el-form ref="key" :model="keyForm" :rules="keyRules" label-width="80px" class="key-wrap">
                      <el-form-item label="分类" prop="typeId">
            <el-select v-model="keyForm.typeId" placeholder="请选择分类">
              <el-option
                 v-for="item in typeOptions"
                  :key="item.value"
                 :label="item.label"
               :value="item.value">
                </el-option>
            </el-select>
              </el-form-item>
            <el-form-item label="流程Key" prop="key">
                <el-input v-model="keyForm.key" placeholder="请输入key"></el-input>
            </el-form-item>
            <el-form-item label="流程名称" prop="name">
                <el-input v-model="keyForm.name" placeholder="请输入流程名称"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmitKey('key')">确认并创建流程</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import request from "@/utils/request";
import { SET_TIME_YYMMDDHHMM } from "@/utils/formatTime";
import qs from "qs";
export default {
  name: "FlowConfig",
  data() {
    return {
      typeOptions:[{
          value: '1',
          label: '新员工入网申请'
        }, {
          value: '2',
          label: '在职人员更换电脑申请'
        }, {
          value: '3',
          label: '在职人员更换位置申请'
        }, {
          value: '4',
          label: '离职人员归还电脑申请'
        }, {
          value: '5',
          label: '电脑及网络维修申请'
        }, {
          value: '6',
          label: '笔记本及配套U盘出借申请'
        }, {
          value: '7',
          label: '应用软件安装申请'
        }, {
          value: '8',
          label: '应用系统权限变更申请'
        }, {
          value: '9',
          label: '人员密级变更申请'
        }],
      Sort: {
        key: ""
      },
      keyForm: {
        key: "",
        name: "",
        typeId:""
      },
      keyRules: {
        key: [{ required: true, message: "请输入key", trigger: "change" }],
        name: [{ required: true, message: "请输入name", trigger: "change" },],
         typeId: [{ required: true, message: "请选择类型", trigger: "change" }],
      },
      tableData: "",
      dialogVisible: false,

      pagesTotal: 0,
      currentPage: 1
    };
  },
  methods: {
    update(id) {
      window.open(
        `${process.env.ROOT}/activiti/modeler.html?modelId=${id}`,
        "_blank"
      );
    },
    cancel(id) {
      request({
        url: this.$api.deleteDeployment + `?deploymentId=${id}`,
        method: "delete"
        //  data: qs.stringify({modelId:id})
      }).then(res => {
        if (res.code === "000000") {
          this.$message.success("取消发布成功");
          this.queryCreatedProcess(this.Sort.key, 10, this.currentPage);
        }
      });
    },
    publish(id) {
      request({
        url: this.$api.deployCreatedProcess,
        method: "post",
        data: qs.stringify({ modelId: id })
      }).then(res => {
        if (res.code === "000000") {
          this.$message.success("发布成功");
          this.queryCreatedProcess(this.Sort.key, 10, this.currentPage);
        }
      });
    },
    delelt(id) {
      request({
        url: this.$api.deleteModel + `?modelId=${id}`,
        method: "delete"
        // data: historyData
      }).then(res => {
        if (res.code === "000000") {
          this.$message.success("删除成功");
          this.queryCreatedProcess(this.Sort.key, 10, this.currentPage);
        }
      });
    },
    detail(id) {
      this.$router.push({
        path: "/Flow/detail" + `?id=${id}`
      });
    },
    createFlow() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    onSubmitKey(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          window.open(
            `${process.env.ROOT}/activiti/create?key=${this.keyForm.key}&name=${this.keyForm.name}&typeId=${this.keyForm.typeId}`,
            "_blank"
          );
          this.dialogVisible = false;
          this.keyForm = "";
        } else {
          return false;
        }
      });
    },
    onQuery() {
      this.queryCreatedProcess(this.Sort.key, 10, 1);
    },
    queryCreatedProcess(condition, limit = 10, offset = 1) {
      request({
        method: "get",
        url:
          this.$api.queryCreatedProcess +
          `?condition=${condition}&limit=${limit}&offset=${offset}`
      }).then(res => {
        this.tableData = res.data.list;
        this.pagesTotal = res.data.total;
      });
    },
    currentChange(apge) {
      this.currentPage = apge;
      this.queryCreatedProcess(this.Sort.key, 10, apge);
    }
  },
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    document.body.className = "con-bg";
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    document.body.className = "";
    next();
  },
  mounted() {
    this.queryCreatedProcess("", 10, 1);
  },
  filters: {
    timeF(time) {
      return SET_TIME_YYMMDDHHMM(time);
    }
  }
};
</script>

<style lang="less" scoped>
.process-list {
  padding-top: 120px;
  max-width: 1200px;
  margin: 0 auto;
}
.key-wrap {
  width: 330px;
  margin: 0 auto;
}
</style>